<template>
    <div id="blog_read">
        <ReadHead></ReadHead>
        <transition name="fade">
            <loading v-if="isLoading"></loading>
        </transition>
        <div class="title">
            <h1>{{this.blog.title}}</h1>
        </div>
        <div class="time">
            <h3>时间：{{this.blog.createdTime}}</h3>
        </div>
        <div class="body">
<!--            <p>内容：{{this.blog.body}}</p>-->
<!--            <article class="markdown-body" style="text-align:left;font-size:20px" v-html="articleDetail"></article>-->
            <mavon-editor
            class="md"
            :value="blog.content"
            :subfield = "prop.subfield"
            :defaultOpen = "prop.defaultOpen"
            :toolbarsFlag = "prop.toolbarsFlag"
            :editable="prop.editable"
            :scrollStyle="prop.scrollStyle"
            :ishljs = "true"
            v-highlight
            />
        </div>

        <el-timeline v-show="ifNoComment" style="margin: 20px auto;max-width: 960px;padding-left: 0px">
                <el-card style="max-width: 500px;
        margin: 0 auto;
        text-align: center;">
                    <h3 style="color: #fd7286">Nobody</h3>
                    <h4><pre style="font-size:20px;" >还没有评论哦</pre></h4>
                </el-card>
<!--            <a href="" style="font-size: 20px;" v-show="ifAdmin">回复</a>-->
        </el-timeline>

        <el-timeline v-show="ifComment" style="margin: 20px auto;max-width: 960px;padding-right: 60px">
            <el-timeline-item :timestamp='comment.createdTime' placement="top" v-for="(comment,key) in this.comments" :key="key">
                <el-card style="max-width: 500px;
        margin: 0 auto;
        text-align: center;">
                    <h3 style="color: #fd7286">{{comment.userName}}:</h3>
                    <h4>
                    <pre style="font-size:20px;" v-html="comment.content">
<!--                    <article class="markdown-body" style="text-align:left;font-size:20px" v-html="message.body"></article>-->
                    </pre>
                    </h4>
<!--                    <a href="" v-show="ifAdmin" style="font-size: 20px;z-index: 5000">回复</a>-->
                </el-card>
            </el-timeline-item>
        </el-timeline>
        <div class="addComment" v-show="ifShowAddComment">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="姓名" prop="userName">
                    <el-input v-model="ruleForm.userName"></el-input>
                </el-form-item>
                <el-form-item  label="邮箱地址" prop="userEmail">
                    <el-input v-model="ruleForm.userEmail"></el-input>
                </el-form-item>
                <el-form-item label="留言内容" prop="content">
                    <el-input type="textarea" v-model="ruleForm.content"></el-input>
                </el-form-item>
                <div id="ifPeople">
                    <Vcode id="BlogReadVcode" :show="isShow" @success="onSuccess()" @close="onClose()" />
                </div>
                <el-form-item id="message-button">
                    <el-button type="primary" @click="submitForm('ruleForm')">提交审核</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--    评论    -->
        <div id="more-comment-button">
            <el-button type="primary" round class="blog_button" @click="moreComment" v-show="this.showButton">加载评论</el-button>
            <el-button @click="addComment" type="primary" icon="el-icon-edit" circle></el-button>
        </div>
    </div>
</template>

<script>
    import Loading from '../components/loading'
    import ReadHead from "../components/ReadHead";
    import Vcode from "vue-puzzle-vcode";
    import 'mavon-editor/dist/markdown/github-markdown.min.css';
    export default {
        name: "BlogRead",
        components:{ReadHead, Loading ,Vcode, },
            created(){
                this.blogId=this.$route.params.blogId
                this.axios.get('/blog/' + this.blogId,).then((response) => {
                    this.blog=response.data.data
                })
                // this.isLoading=false
            },
        data(){
            var checkEmail = (rule, value, cb) => {
                // 验证邮箱的正则表达式
                const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
                if (regEmail.test(value)) {
                    // 合法的邮箱
                    return cb();
                }
                cb(new Error("请输入合法的邮箱"));
            };
            return{
                ruleForm: {
                    userName: '',
                    userEmail:'',
                    content: '',
                },
                rules: {
                    userName: [
                        { required: true, message: '请输入姓名', trigger: 'blur' },
                        { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
                    ],
                    userEmail: [
                        { required: true, message: '请输入邮箱(不会公开)', trigger: 'blur' },
                        { min: 5, max: 30, message: '长度在 5 到 30 个字符', trigger: 'blur' },
                        {
                            validator: checkEmail,
                            message: "请输入正确的邮箱地址",
                            trigger: "blur"
                        }
                    ],
                    content: [
                        { required: true, message: '请填写评论内容', trigger: 'blur'},
                        { min: 5, message: '长度在5个字符以上', trigger: 'blur'}
                    ]
                },
                blog:{},
                blogId:'',
                isLoading:true,
                ifShowAddComment:false,
                showButton:true,
                isShow:false,
                ifComment:false,
                comments:[],
                pageNum:1,
                ifNoComment:false,
                ifAdmin:false,
                pageIndex:0,
                pageSize:2,
            }
        },
        computed: {
            prop () {
                let data = {
                    subfield: false,// 单双栏模式
                    defaultOpen: 'preview',//edit： 默认展示编辑区域 ， preview： 默认展示预览区域
                    editable: false,
                    toolbarsFlag: false,
                    scrollStyle: true
                }
                return data
            }
        },
        methods:{
            addComment(){
                this.ifShowAddComment=!this.ifShowAddComment
            },
            moreComment(){
                this.axios.post('/comment/paging',
                    {
                        blogId: this.$route.params.blogId,
                        status: 1,
                        pageIndex: ++this.pageIndex,
                        pageSize: this.pageSize
                    }).then((res)=>{
                        if (res.data.code !== 200) {
                            this.$message.error({
                                message: res.data.data,
                                type: 'error',
                                showClose: true
                            })
                        } else {
                            const data = res.data.data;
                            if (data.totalCount === 0) {
                                this.ifNoComment = true
                                this.showButton = false
                            } else if (data.pageIndex === data.totalPage) {
                                this.showButton = false
                            } else {
                                this.ifNoComment = false
                            }
                            this.ifComment = true
                            if (this.pageIndex === 1) {
                                this.comments = data.list
                            } else {
                                this.comments = this.comments.concat(data.list)
                            }
                        }
                })
            },
            // 滑块验证成功回调
            onSuccess( ) { //onSuccess(msg,blogId) {
                this.isShow=false
                this.axios.post('/comment',{
                    userName:this.ruleForm.userName,
                    content:this.ruleForm.content,
                    userEmail:this.ruleForm.userEmail,
                    blogId:this.$route.params.blogId
                }).then((res)=>{
                    if (res.data.code !== 200 || res.data.data !== 1) {
                        this.$message({
                            message: '提交失败,请稍后重试!',
                            type: 'error'
                        });
                    } else {
                        this.$message({
                            message: '感谢您的留言,待审核完毕将会显示您的评论！',
                            type: 'success'
                        });
                        setTimeout(function(){
                            location.reload();   //可以是一句或是很多句代码，也可以是个函数
                        },1000); //延时2秒
                    }
                })
            },
            // 滑块验证失败回调
            onClose() {
                this.isShow=false
                this.$message({
                    message: '取消验证！',
                    type: 'warning'
                });
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if(valid){
                        this.isShow=true
                    }else {
                        this.$message({
                            message: '请填写完整',
                            type: 'warning'
                        });
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
        },
        mounted() {
            //判断所有资源是否加载完毕
            var _this = this
            var timer = setInterval(function () {
                // 判断文档和所有子资源(图片、音视频等)已完成加载
                if (document.readyState === 'complete') {
                    //执行方法
                    _this.isLoading=false
                    window.clearInterval(timer)
                }
            }, 500)
        }
    }
</script>

<style scoped>
    #blog_read{
        max-width: 960px;
        margin: 0 auto;
        text-align: center;
        position: relative;
        z-index: 90;
    }
    .title{
        margin-top: 5%;
    }
    .time{
        margin-left: 50%;
    }
    #more-comment-button{
        max-width: 960px;
        margin: 20px auto;
        text-align: center;
    }
    .addComment{
        padding-top: 20px;
        max-width: 500px;
        margin: 0 auto;
        text-align: center;
        padding-right: 60px;
    }
    .addComment #BlogReadVcode{
        position:static;
        left:0px;
        top:0px;
        z-index:100;
    }
    /* 可一次性设置样式*/
    a:hover, a:visited, a:link, a:active {
        color: coral;
        text-decoration: none;
    }
</style>
